import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Input, Tag, Icon, message, Button, Form, Row, Col, AutoComplete, Select} from 'antd';
import styles from './index.less';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

@connect(state => ({

}))
export default class TopicContent extends PureComponent {
  state = {
    topic:'',
    version:'',
    topicList:[]
  }
 constructor(props) {
    super(props);
    this.nicaiCrx = document.getElementById('nicaiCrx');
  
  }
  componentDidMount() {
    this.handleGetTopicContent({type: 2, pageSize: 10, pageNo:1});
    this.nicaiCrx.addEventListener('setTopic', this.setTopicContent);
  }

  componentWillReceiveProps(nextProps) {
    this.handleGetTopicContent({type: 2, pageSize: 10, pageNo:1});
  }
  
  setTopicContent = (e) => {
    const data = JSON.parse(e.target.innerText)
    this.setState({
      topicList: data.list
    });
  }
  handleChange = (val) => {
    this.setState({
      topic: val
    })
  }

  handleOk = () => {
    if (this.props.onChange) this.props.onChange(this.state.topic);
    this.setState({
      topic: ''
    });
    if (this.props.onOk) this.props.onOk();
  }
 getTopic = (data) => {
    this.nicaiCrx.innerText = JSON.stringify(data);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getTopic', true, true);
    this.nicaiCrx.dispatchEvent(customEvent);
  }
  
  handleGetTopicContent = (param) => {
    this.getTopic({
      url: 'https://h5api.m.taobao.com/h5/mtop.taobao.social.scene.query/1.0/',
      type: 'GET',
      dataType:'jsonp',
      data: {
        key:this.state.topic,
        pageSize:10,
        type:2,
        pageNo:1
      },
      actionName: 'setTopic',
    });
  }
  handleChoose = (e) => {
    this.setState({
      topic: e.target.innerText
    }, this.handleOk)
  }
  render() {
    const { topicList, topic } = this.state;
    return (
      <div style={{width: '560px'}}>
        <Row gutter={8}>
          <Col span={20}>
            <AutoComplete placeholder={'请输入话题名称'} onChange={this.handleChange} value={this.state.topic} style={{width:'100%'}}/>
          </Col>
          <Col span={4}>
            <Button type="primary" className={styles['block-common-btn']} onClick={this.handleOk}>添加话题</Button>
          </Col>
        </Row>
        <div>
          <p style={{fontSize:'12px',color:'rgb(153, 153, 153)',paddingTop:'20px'}}>推荐的官方话题：</p>
          <div style={{display:'flex',flexWrap:'wrap',maxHeight:'100px',overflowY:'scroll'}}>
          { 
            topicList && topicList.map((item, index) => <Tag 
              style={{margin:'10px 10px 0 0'}} 
              value={item.title}
              onClick={this.handleChoose}
              key={index}>{item.title}</Tag>)}
          </div>
        </div>
      </div>
    );
  }
}
